<template>
  <div>
    <wx-tables
      :columns="columns"
      title="老师管理"
      :data-source="dataSource"
      :loading="loading"
      :total="total"
      :page.sync="page"
    >
      <template #search>
        <!--        <tip-block tip="搜索" />-->
        <el-form label-position="left" style="margin-top: 10px;">
          <div style="display: flex;">
            <el-form-item style="display: flex;" label="老师姓名" prop="search_code">
              <el-input v-model="searchForm.search_teacher_name" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在学部" prop="search_code">
              <el-select v-model="searchForm.search_teacher_department_id" clearable placeholder="请选择学部">
                <el-option
                  v-for="item in select_dept"
                  :key="item.type"
                  :label="item.label"
                  :value="item.type"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在年级" prop="search_code">
              <el-select v-model="searchForm.search_teacher_grade_name" clearable placeholder="请选择年级">
                <el-option
                  v-for="item of 20"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在班级" prop="search_code">
              <el-select v-model="searchForm.search_teacher_class_name" clearable placeholder="请选择班级">
                <el-option
                  v-for="item of 20"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div style="margin-left: 5%;">
              <el-button type="primary" class="table-btn" icon="el-icon-search" @click="handleSearchClick">筛选</el-button>
              <el-button class="table-btn" icon="el-icon-refresh" @click="handleRectSearch">重置</el-button>
            </div>
          </div>
        </el-form>
      </template>
      <!-- tools -->
      <template #tools>
        <!--        <el-button type="primary" class="table-btn" icon="el-icon-plus" @click="handleOpenMyForm()">新增</el-button>-->
        <!--        <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
      </template>
      <template v-slot:real_name="record">
        {{record.row.real_name || record.row.phonenum}}
      </template>
      <template v-slot:oper="record">
        <div class="oper-box">
          <span><el-link type="primary" @click="handleOpenForm(record.row.id,editCon,record.row)">编辑</el-link></span>
          <span><el-link type="primary" @click="handleOpenRole(record.row)">更改角色</el-link></span>
          <el-popconfirm
            :ref="`popover-${record.$index}`"
            :title="`确定${record.row && record.row.status === 0 ? '启用' : '注销'}当前老师吗？`"
            @confirm="handleSetStatus(record.row)"
          >
            <el-link slot="reference" type="primary">{{ record.row && record.row.status === 0 ? '启用' : '注销' }}
            </el-link>
          </el-popconfirm>
          <!--          <span><el-link type="primary" @click="handleChangeTeacher(record.row)">更改角色</el-link></span>-->
        </div>
      </template>
      <wx-dialog
        :visible.sync="formVisibleRole"
        title="更改角色"
        width="500px"
        @ok="handleChangeRole"
      >
        <el-form :model="formInfo" label-position="left" label-width="100px">
          <el-form-item label="更改角色" prop="janitor_name">
            <el-select v-model="formInfo.role" placeholder="请选择角色">
              <el-option
                v-for="(item,ins) of SELECT_ROLE_LIST"
                :key="ins"
                :label="item.tabel"
                :value="item.value"
              />
            </el-select>
            <div style="color: red">老师更改角色将删除老师名下所有数据请,谨慎操作！！</div>
          </el-form-item>
        </el-form>
      </wx-dialog>
      <wx-dialog
        ref="wx-dialog"
        :visible.sync="formVisible"
        title="编辑"
        width="500px"
        @ok="handleSaveForm"
      >
        <div>
          <el-form ref="ruleForm" :rules="ruleForm" :model="formInfo" label-position="left" label-width="75px">
            <el-form-item label="姓名" prop="real_name">
              <el-input v-model="formInfo.real_name" type="text" placeholder="老师姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phonenum">
              <el-input v-model="formInfo.phonenum" maxlength="11" type="number" placeholder="手机号" />
            </el-form-item>
            <el-form-item label="班级" prop="select_class">
              <el-cascader
                v-model="formInfo.select_class"
                clearable
                :options="selectClassList"
                @change="handleGetInfoByList"
              />
            </el-form-item>
          </el-form>
        </div>
      </wx-dialog>
    </wx-tables>
  </div>
</template>

<script>
// const TITLE = '老师管理'
import WxTables from '@/components/WxTables'
import FullMixins from '@/components/WxTables/fullMixins'
import TableMixins from '@/components/WxTables/mixins'
// import TipBlock from '@/components/TipBlock'
import WxDialog from '@/components/WxDialog'
import { SELECT_ROLE, SELECT_ROLE_LIST } from '@/views/constants'
import { get } from '@/utils/request'
// const DEFULTWIDTH = { 'min-width': 150 }
export default {
  name: 'Teacher',
  components: {
    WxTables,
    WxDialog
  },
  mixins: [TableMixins, FullMixins],
  data() {
    return {
      editCon: ['real_name', 'phonenum', 'role','user_id', 'id', 'class_name', 'class_invite_code', 'grade_name', 'year_department_id', 'select_class'],
      searchForm: {
        school_id: 1,
        role: 'teacher'
      },
      selectClassList: [],
      SELECT_ROLE_LIST,
      select_dept: [],
      SELECT_ROLE,
      changeRole: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'real_name', label: '老师姓名',slots: true },
        { dataIndex: 'phonenum', label: '手机号' },
        { dataIndex: 'department_name', label: '所在学部' },
        { dataIndex: 'grade_name', label: '所在年级' },
        { dataIndex: 'class_name', label: '所在班级' },
        { dataIndex: 'class_invite_code', label: '班级邀请码' },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/accountUser/getListByCon?role=teacher&level=teacher,class,garde',
      // 根据ID markId 查询
      // findApi: 'api/adminPortal/teacher/getListByCon?level=grade,class',
      // 接口前缀 修改
      baseApi: 'api/adminPortal/accountUser/',
      ruleForm: {
        real_name: [
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        phonenum: [
          { required: true, message: '请填写手机号', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
        select_class: [
          { required: true, message: '请选择班级', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dataSource() {
      this.dataSource.forEach((item) => {
        if (item.grade === null || item.class === null && item) return
        item.year_department_id = item.department.id
        item.user_id = item.id
        item.class_name = item.class.name
        item.department_name = item.department.name
        item.grade_name = item.grade.name
        item.class_invite_code = item.class.invite_code
        item.select_class = [item.year_department_id, item.grade_name, item.class_name]
      })
    }
  },
  mounted() {
    this.handleGetYearDepartment()
    this.handleGetDepartmentList()
  },
  methods: {
    handleGetDepartmentList() {
      get('api/adminPortal/yearDepartment/getListByCon', {
        level: 'class'
      }).then((res) => {
        res.data.data.forEach((item) => {
          const onelist = {
            label: item.name,
            value: item.id,
            children: []
          }
          this.selectClassList.push(onelist)
          item.grade_arr.forEach((its) => {
            const twoList = {
              label: `${its.name}年级`,
              value: its.name,
              children: []
            }
            onelist.children.push(twoList)
            its.class_arr.forEach((index) => {
              const threeList = {
                label: `${index.name}班`,
                value: index.name
              }
              twoList.children.push(threeList)
            })
          })
          return onelist
        })
      })
    },
    handleGetInfoByList(data) {
      if(data){
        this.formInfo.year_department_id = data[0]
        this.formInfo.grade_name = data[1]
        this.formInfo.class_name = data[2]
      }
    },
    handleChangeTeacher(data) {
      this.changeRole = true
      this.$set(this.formInfo, 'role', data.role)
    },
    handleGetYearDepartment() {
      get('api/adminPortal/yearDepartment/getListByCon?level=year_grade').then((res) => {
        this.select_dept = res.data.data.map((item) => {
          const list = {
            type: item.id,
            label: item.name
          }
          return list
        })
      })
    }
  }
}
</script>
